<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>品牌案例管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="类目名称" prop="courseName">
                <el-input v-model="form.courseName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="mt-20">
          <el-button type="primary" @click="onAdd" v-if="mdata.length > 0"><i class="el-icon-plus"></i> 新建</el-button>
          <!--
          <el-button type="danger" @click="onRemove" disabled><i class="el-icon-delete"></i> 批量删除</el-button>
          -->
        </div>
        <div class="mt-20">
          <el-table :data="data" v-loading="loading">
            <el-table-column prop="courseName" label="类目名称" min-width="180">
            </el-table-column>
            <el-table-column prop="sort" label="排序" min-width="80">
              <template slot-scope="scope">
                <span>{{(scope.row.sort != 0 && (scope.row.sort == '' || scope.row.sort == null)) ? '--' : scope.row.sort}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="150">
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="doEdit(scope.row)">修改</el-button>
                <el-button type="dangertext" @click="doDelete(scope.row.courseTypeId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <m-edit v-if="editVisible" :visible.sync="editVisible" :data="editData" :type="editType" @save="editSave"></m-edit>
  </div>
</template>

<script>
import EditModel from './edit'
  export default {
    components: {
      MEdit: EditModel
    },
    data () {
      return {
        form: {},
        data: [],
        total: 10,
        loading: false,
        treeData: [],
        editType: 0,
        defaultProps: {
          children: 'children',
          label: 'courseName'
        },
        editVisible: false,
        editData: {},
        showType: 'all',
        mdata: []
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.loading = true
        const params = {
          courseLevel: 1,
          documentType: 2
        }
        this.$api.courseType.getList(params).then(res => {
          if(res.success){
            this.mdata = res.data
            if(this.mdata[0]){
              this.loadData()
            } else {
              const _params = {
                courseName: '品牌案例', 
                sort: 1,
                remark: '品牌案例',
                documentType: 2,
                courseLevel: 1
              }
              this.$api.courseType.add(_params).then(res => {
                if(res.success) {
                  this.loadData()
                }
              })
            }
          }else {
            this.loading = false
          }
        }).catch(err=>{
          this.loading = false
        })
      },
      loadData() {
        const params = {
          ...this.form,
          courseLevel: 2,
          documentType: 2
        }
        this.$api.courseType.getList(params).then(res => {
          if(res.success){
            this.data = res.data
            this.loading = false
          }else {
            this.loading = false
          }
        }).catch(err=>{
          this.loading = false
        })
      },
      onSearch() {
        this.currentPage = 1
        this.loadData()
      },
      onReset() {
        this.$refs.form.resetFields()
        this.currentPage = 1
        this.loadData()
      },
      onAdd() {
        this.$router.push('/partner/classify/add')
      },
      // 修改
      doEdit(data) {
        this.editData = data
        this.editVisible = true
      },
      // 删除
      doDelete(id) {
        this.$confirm('删除后不可还原，确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$api.courseType.delete(id).then(res => {
            if(res.success) {
              this.$message.success('已删除')
              this.currentPage = 1
              this.loadData()
            }
          })
        })
      },
      editSave(){
        this.editVisible = false
        this.loadData()
      }
    }
  }
</script>

<style lang="less">
  .tree-modal{
    width: 500px;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
 
</style>
